<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { router } from "@/router";
import { get_scan_tactics, getPocTactics } from "@/api/tactics";
import { add_schedule, search_schedule, task_search } from "@/api/task";
import { message } from "@/utils/message";
defineOptions({
  name: "AutoSetting",
});

import GatherSix from "../../gather/gathersix.vue";
import dayjs from "dayjs";
const formInline = reactive({
  policy_name: "",
  taskName: "",
  creater: "",
  task_id: "",
  ipscope: "",
  createTime: "",
  tacticsName: "",
  level: "",
});

const formAddHardware = reactive({
  taskType: "",
  taskName: "",
  taskRegion: "",
  startTime: "", //启动时间
  linkTactics: "", //关联策略
  cron: "", //cron表达式
  monthDay: "",
  weekDay: "",
});

const addTaskFormRef = ref<FormInstance>();

const hardwareRules = reactive<FormRules>({
  taskName: [
    { required: true, message: "请输入任务名称", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
    // { validator: validatePass2, trigger: 'blur' }
  ],
  taskRegion: [
    {
      required: true,
      message: "请填写资产范围~",
      trigger: "blur",
    },
  ],
  taskType: [
    {
      required: true,
      message: "请选择一个任务类别",
      trigger: "change",
    },
  ],
  linkTactics: [
    {
      required: true,
      message: "请关联策略",
      trigger: "change",
    },
  ],
  startTime: [
    {
      // type: "array",
      required: true,
      message: "请选择日期区间",
      trigger: "change",
      // fields: {
      //   // tpye类型试情况而定,所以如果返回的是date就改成date,如果返回的是string就改成string
      //   0: { type: "date", required: true, message: "请选择开始日期" },
      //   1: { type: "date", required: true, message: "请选择结束日期" }
      // }
    },
  ],
});

const showAddHardwareDialog = ref(false);

const tableData = ref([]);

const currentPage = ref(1); // 当前页码
const pageSize = ref(20); // 每页显示的条数
const totalTabalData = ref(0); // 总条数

const tacticsList = ref([]);

const getPocTacticsList = () => {
  getPocTactics({
    severity: formInline.level,
    page: currentPage.value,
    per_page: pageSize.value,
    search: formInline.tacticsName,
  }).then((res) => {
    if (res.code === 2000) {
      const newArr = [
        ...res.data.items.critical,
        ...res.data.items.high,
        ...res.data.items.medium,
        ...res.data.items.low,
        ...res.data.items.info,
      ];

      tableData.value = newArr;
      totalTabalData.value = res.data.total;
    }
  });
};

//写一个函数，转换英文等级为汉字
const transLevel = (level) => {
  switch (level) {
    case "critical":
      return "紧急";
    case "high":
      return "高危";
    case "medium":
      return "中危";
    case "low":
      return "低危";
    case "info":
      return "信息";
    default:
      return "";
  }
};

watch(showAddHardwareDialog, (newVal, oldVal) => {
  // resetAddTaskForm();
});

onMounted(() => {
  getPocTacticsList();
});
</script>

<template>
  <div>
    <div class="">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <el-form
              :inline="true"
              :model="formInline"
              size="small"
              class="demo-form-inline"
              @submit.prevent
            >
              <el-form-item v-if="false">
                <el-button type="primary" @click="showAddHardwareDialog = true"
                  >新建任务</el-button
                >
              </el-form-item>

              <el-form-item label="名称">
                <el-input
                  v-model="formInline.tacticsName"
                  placeholder="名称"
                  maxlength="30"
                  clearable
                  @keydown.enter="getPocTacticsList"
                >
                  <template #append>
                    <el-button :icon="Search" @click="getPocTacticsList" />
                  </template>
                </el-input>
              </el-form-item>
              <!-- 写一个下拉框，里面是等级分类，用户更加等级变化调用查询接口 -->
              <el-form-item label="漏洞等级">
                <el-select
                  v-model="formInline.level"
                  placeholder="请选择"
                  @change="getPocTacticsList"
                >
                  <el-option label="全部" value="" />
                  <el-option label="紧急" value="critical" />
                  <el-option label="高危" value="high" />
                  <el-option label="中危" value="medium" />
                  <el-option label="低危" value="low" />
                  <el-option label="信息" value="info" />
                </el-select>
              </el-form-item>

              <!-- <el-form-item label="域名">
                <el-input
                  v-model="formInline.creater"
                  placeholder="域名"
                  maxlength="30"
                  clearable
                >
                  <template #append>
                    <el-button :icon="Search" />
                  </template>
                </el-input>
              </el-form-item> -->
            </el-form>
          </div>
        </template>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" width="80" label="序号" />
          <el-table-column label="名称" prop="id" width="300" />
          <el-table-column label="描述信息" prop="name" width="450" />
          <el-table-column label="作者" prop="author" width="250" />

          <el-table-column label="等级" prop="severity">
            <template #default="rowscope">
              <div>
                {{ transLevel(rowscope.row.severity) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300px" fixed="right">
            <template #default="rowscope">
              <el-button size="small" type="success"> 查看</el-button>
              <el-button size="small" type="warning"> 删除</el-button>
              <el-button size="small" class="el-btn-zese"> 执行</el-button>
              <el-button size="small"> 添加脚本</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getPocTacticsList"
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          v-model:page-size="pageSize"
          @size-change="getPocTacticsList"
          layout="total, sizes, prev, pager,next"
          :total="totalTabalData"
          background
        />
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__header) {
}

:deep(.el-pagination) {
  justify-content: right;
  margin-top: 10px;
  margin-right: 30px;
}
.gather-container {
  display: block;
  margin-bottom: 10px;
}

.min-w-input {
  width: 300px;
}

.el-btn-zese {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}

.el-btn-zese.is-disabled,
.el-btn-zese.is-disabled:focus,
.el-btn-zese.is-disabled:hover {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}
</style>
